<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>巡检项目人员管理</title>

<link href="css/global.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery1.4.4.js"></script>
<script type="text/javascript" src="js/global.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<script language="javascript" type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script>
</head>
<body>
	<jsp:include page="WEB-INF/template/header.jsp">
		<jsp:param value="current" name="personManage"/>
	</jsp:include>
	<div id="container" class="section">
		<div class="main">
			<p class="form-item">
				<label for="d523">更新时间：</label><input id='d523' size="10px" readonly="readonly"/>
				<label for="member">人员：</label><select id="member" onchange="show_workers('member')"><option>全部</option></select>
				<label for="area">片区：</label><select id="area" onchange="show_workers('area')"><option>全部</option></select>
				<label for="interval">刷新间隔：</label><input id="interval" disabled='false' value="10" size="4px"></input>
	                        <input id='timer_button' type="button" onclick="reset_timer()" value="取消定时刷新" />
			</p>
			<div style="width:520px;height:340px;border:1px solid gray" id="baidumap"></div>
		</div>
		<div class="aside">
			<ul class="side-nav">
				<li class="nav-item high-light"><a id="side-nav-1" class="nav-base" href=""><b>人员位置</b><em></em></a></li>
				<li class="nav-item "><a id="side-nav-1" class="nav-base" href="ShowExeRecordOfOneWorker"><b>执行记录</b><em></em></a></li>
				<li class="nav-item"><a id="side-nav-2" class="nav-base" href="ShowWorkers?mode=add"><b>新增人员</b><em></em></a></li>
				<li class="nav-item"><a id="side-nav-3" class="nav-base" href="ShowAllWorkers"><b>人员信息</b><em></em><s></s></a>
				</li>
			</ul> 
		</div>
		<div class="clear"></div>
	</div>
	<jsp:include page="WEB-INF/template/footer.jsp"></jsp:include>
</body>
<script type="text/javascript">
    
var baidu = new BMap.Map("baidumap");                        // 创建Map实例

var members = new Object();
var regions = new Object();
var markers = new Array();
var poiToWorker = new Object();
var nameToMarker = new Object();
var workers;
var currentTime = new String();
var title = "巡检系统    人员实时位置   更新时间 " ;
var TimerID = -1 ;

var unexecIcon = new BMap.Icon( 
    "http://api.map.baidu.com/img/markers.png",new BMap.Size(28, 37),
    {
	offset: new BMap.Size(10, 25),
	imageOffset: new BMap.Size(0, 0 - 11 * 25)
    }
);

var execIcon = new BMap.Icon( 
    "http://api.map.baidu.com/img/markers.png",new BMap.Size(28, 37),
    {
	offset: new BMap.Size(10, 25),
	imageOffset: new BMap.Size(0, 0 - 12 * 25)
    }
);
    
var finishIcon = new BMap.Icon( 
    "http://api.map.baidu.com/img/markers.png",new BMap.Size(28, 37),
    {
	offset: new BMap.Size(10, 25),
	imageOffset: new BMap.Size(0, 0 - 10 * 25)
    }
);

var unknownIcon = new BMap.Icon( 
    "http://api.map.baidu.com/img/markers.png",new BMap.Size(28, 37),
    {
	offset: new BMap.Size(10, 25),
	imageOffset: new BMap.Size(0, 0 - 1 * 25)
    }
);

function add_elements_in_a_group(group, obj){
    var i = 1 ;
    var sel = document.getElementById(group);
    var cur = sel.options[sel.selectedIndex].text ;
    sel.options.length = 1; 
    sel.selectedIndex = 1 ;
    for( name in obj){
	var opt = document.createElement('OPTION');
	try
	{
	    sel.add(opt,null); // standards compliant
	}
	catch(ex)
	{
	    sel.add(opt); // IE only
	}

	//sel.add(opt) ;
	opt.key = name ;
	opt.text = name ;
	if( name == cur)
	    sel.selectedIndex = i ;
	i++ ;
    }
}

function add_element_to_its_group(obj, name, index){
    if(obj[name] == null)
	obj[name] = 1;
}
    
function free_global_object(obj){
    obj = null;
    obj = new Object() ;	
}

function free_all_global_objects(){
    free_global_object(members);
    free_global_object(regions);
    free_global_object(poiToWorker);
    free_global_object(nameToMarker);
}

function click_marker(){
    var p = this.getPosition();
    var w = workers[poiToWorker[p.lng +":" + p.lat]];
    var sContent = "<li>姓名          " + w.Worker + "</li>";
    sContent += "<li>工号           " + w.ID + "</li>";
    sContent += "<li>性别           " + w.Gender + "</li>";
    sContent += "<li>联系方式        " + w.Contact + "</li>";
    sContent += "<li>工作岗位        " + w.WorkerPosition + "</li>";
    sContent += "<li>更新时间        " + w.Date + "</li>";
    sContent += "<li>所属片区        " + w.Region + "</li>";
    
    var opts = {
	title : "人员详细信息"  // 信息窗口标题
    };
    
    var infoWindow = new BMap.InfoWindow(sContent, opts); 
    this.openInfoWindow(infoWindow);
}

function set_select_disabled(id, t){
    var sel = document.getElementById(id) ;
    sel.disabled = t ;
}

function disable_all_selects(){
    set_select_disabled('member', true);
    set_select_disabled('area', true);
}

function enable_all_selects(){
    set_select_disabled('member', false);
    set_select_disabled('area', false);
}

function is_group_let_show(n, group){
    var sel = document.getElementById(group) ;
    var t = sel.options[sel.selectedIndex].text ;
    
    if ( t == "全部")
	return true ;
    
    if(t == n)
	return true ;
    else
	return false ;
}

function free_all_markers(){
    if(typeof(markers) == "undefined")
	return ;
    
    var i = 0 ;	
    for( ;  i < markers.length ; ++i){
	    if(markers[i] != 0)
		    baidu.removeOverlay(markers[i]) ;
    }

    markers = null ;
    markers = new Array() ;
}

function show_workers(group){
    var i = 0 ;
    if(typeof(workers) == "undefined")
	return ;

    for( ; i < workers.length ; ++i){
	    var w = workers[i];
	    
	    if(!is_group_let_show(w.Worker, 'member')){
		    if(markers[i] != 0)
			    markers[i].hide();
		    continue ;
	    }
	    
	    if(!is_group_let_show(w.Region, 'area')){
		    if(markers[i] != 0)
			    markers[i].hide();
		    continue ;
	    }
	    
	    if(markers[i] != 0)
		    markers[i].show();
    }
}

function set_time(d){
    var cur = document.getElementById("d523");
    cur.disabled = false ;
    cur.value = d;
    cur.disabled = true ;
}

function init_data(){
    var i ;
    
    if(typeof(workers) == 'undefined')
	return ;
    
    for(i = 0 ; i < workers.length; i++ ){
	var w = workers[i] ;
	if(w.Lng == 1000 || w.Lat == 1000){
		markers[i] = 0 ;
	}
	else{
		var point = new BMap.Point(w.Lng,w.Lat);
		var marker ;
		var poi ;
		
		if(w.Status == 1)
			marker = new BMap.Marker(point, unexecIcon);
		else if(w.Status == 2)
			marker = new BMap.Marker(point, execIcon) ;
		else if(w.Status == 3)
			marker = new BMap.Marker(point, finishIcon) ;
		else 
			marker = new BMap.Marker(point, unknownIcon) ;
		
		marker.addEventListener("click", click_marker) ;
		poi = marker.getPosition();
		marker.setTitle(w.Worker + " 最后更新时间：" + w.Date);
		poiToWorker[poi.lng+":"+poi.lat] = i ;
		markers[i] = marker ;
		baidu.addOverlay(marker);
	}
	
	nameToMarker[w.Worker] = i ;
	add_element_to_its_group(members, w.Worker, i);
	add_element_to_its_group(regions, w.Region, i);
    }
}

var str = '[{"Lng":"116.4063","Lat":"39.908802","Date":"2011-08-29","Worker":"王乐业","ID":"00001","Contact":"123456","Region":"未知","WorkerPosition":"普通员工","Gender":"男"},{"Lng":"116.4263","Lat":"39.875","Date":"1970-01-01","Worker":"邵博","ID":"00002","Contact":"123456","Region":"未知","WorkerPosition":"普通员工","Gender":"男"},{"Lng":"116.4463","Lat":"39.935","Date":"1970-01-01","Worker":"子航","ID":"00003","Contact":"123456","Region":"未知","WorkerPosition":"普通员工","Gender":"男"},{"Lng":"116.3863","Lat":"39.895","Date":"1970-01-01","Worker":"Penny","ID":"00004","Contact":"123456","Region":"未知","WorkerPosition":"普通员工","Gender":"女"},{"Lng":"116.3663","Lat":"39.915","Date":"1970-01-01","Worker":"Sheldon","ID":"00005","Contact":"123456","Region":"未知","WorkerPosition":"普通员工","Gender":"男"},{"Lng":"116.4063","Lat":"39.945","Date":"1970-01-01","Worker":"Aimi","ID":"00006","Contact":"123456","Region":"未知","WorkerPosition":"普通员工","Gender":"女"},{"Lng":"1000","Lat":"1000","Date":"1970-01-01","Worker":"Mike","ID":"00001","Contact":"123456","Region":"未知","WorkerPosition":"普通员工","Gender":"男"}, {"Lng":"1000","Lat":"1000","Date":"1970-01-01","Worker":"Jenny","ID":"00001","Contact":"123456","Region":"未知","WorkerPosition":"普通员工","Gender":"女"}]'
	
function load_data(){
    $.ajax({
	url: "ListAllWorkersRealTimePosition",
	dataType: "json",
	cache: false,
	success: function(msg){
	    //window.CollectGarbage();
	    disable_all_selects();
	    free_all_global_objects();
	    workers = null ;
	    workers = new Array();
	    free_all_markers() ;

	    /*when the data is available. Replacing the following line "workers = eval(str);" with "workers = msg;" */
	    //workers = eval(str);
	    workers = msg ;
	    init_data();
	    add_elements_in_a_group('member', members);
	    add_elements_in_a_group('area', regions);
	    show_workers();
	    enable_all_selects();
	    set_time(currentTime);
	}
    }); 
}
	
function init_baidu_map(){
    baidu.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    baidu.addControl(new BMap.NavigationControl());
    baidu.addControl(new BMap.ScaleControl());
    baidu.addControl(new BMap.OverviewMapControl());
}	
	
$(document).ready(function(){
    init_baidu_map();
    load_data();
});

function refresh_func(){
	var d = new Date();
	enable_cancel_timer();
	currentTime = d.toTimeString().split(" ")[0];
	document.title= title + d;
	load_data();
	return true;
}

function TimerCancel(id){
	if(id == -1)
		return ;
	window.clearInterval(id);
}

function TimerStart(func)
{
	var delay = document.getElementById('interval').value;
	delay *= 1000;
	TimerID = window.setInterval( function(){
			if(!func()){
				window.clearInterval(TimerID);
				TimerID = -1 ;
			};
		},
		delay
		);
}

function enable_cancel_timer(){
	var t = document.getElementById('interval') ;
	var b = document.getElementById('timer_button');
	t.disabled = true ;
        b.value = "取消定时刷新" ;
}

function reset_timer(){
	var t = document.getElementById('interval') ;
	var b = document.getElementById('timer_button');

	if(b.value == "启动定时刷新"){
		enable_cancel_timer() ;
		TimerStart(refresh_func);
	}
	else{
		TimerCancel(TimerID);
		t.disabled = false ;
		b.value = "启动定时刷新" ;
	}
}

window.onload =function()
{
    var d = new Date();
    currentTime = d.toTimeString().split(" ")[0];
    document.title = title + d;
    enable_cancel_timer();
    set_time(currentTime);
    TimerStart(refresh_func);
}
</script>
</html>
